<template>
  <div class ='searchContainer'>
     <div class="search">
         <input type="search" v-model="keyWorld"  placeholder="请输入城市名/拼音">  
     </div>
     <ul class ='search-box' v-if ="keyWorld.length"> 
         <li  class ='search-item' v-for = "item in list" :key = "item.id" @click = "search(item.name)">
                {{item.name}}
         </li>
         <li v-show ="!lenght">没有找到对应城市</li>
     </ul>
  </div>
</template>
<script>
export default {
    data () {
        return {
            keyWorld : '',
            list:[]
        }
    },
    props:['lblist'],

    methods: {
        search (city) {
       localStorage.city = city
        this.$store.commit("getlist",city)
        this.$router.push('/')
    }
    },
    watch : {
        keyWorld () {
            const result = []
            for(let i  in this.lblist){
                this.lblist[i].forEach(value => {
                    if(value.spell.indexOf(this.keyWorld) > -1 || value.name.indexOf(this.keyWorld) > -1){
                        result.push(value)
                    }
                   
                })
            }
            this.list = result
        }
    },
    computed : {
        lenght () {
            return this.list.length;
        }
    }
 
}
</script>
<style lang="less" scoped>
@font:100px;
    .searchContainer{
        .search {
            height:40rem/@font;
            width:100%;
            background: #00bcd4;
            position:relative;
            input {
                font-size:12rem/@font;
                position:absolute;
                top:7rem/@font;
                left:0;
                right:0;
                bottom:0;
                height:25rem/@font;
                text-align:center;
                border-radius: 5rem/@font;
                width:100%;
                border:none;
            }
        }
        .search-box{
            width:100%;
            height:100%;
            background:#fff;
            position:absolute;
            z-index: 999;
            li{
                width:100%;
                line-height:30rem/@font;
                border-bottom:1px solid #ddd;
                padding-left:10rem/@font;
            }
        }
    }
</style>
